<script setup>
const navigateTo = () => {
  uni.navigateTo({
    url: '/pages/index/module/item'
  })
}
</script>

<template>
  <div class="content">
    <nav>
      <ul>
        <li @click="navigateTo">
          <div class="phone"><img alt="" src="./hitchhiker/1.jpg"></div>
          <div class="title">在校备考24年省考，求学习搭子</div>
          <div class="details">晨起早读，每晚学习。
            制定计划，按时打卡。
            相互勉励，不言放弃。
            共同进步，早日上岸。
          </div>
          <div class="avatar-username">
            <div class="avatar">
              <img alt=""
                   src="https://img2.baidu.com/it/u=2373877329,1068104021&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400">
            </div>
            <div class="username">
              暗夜行者之光
            </div>
          </div>

        </li>
        <li @click="navigateTo">
          <div class="phone"><img alt="" src="./hitchhiker/2.jpg"></div>
          <div class="title">中博夜步寻伴，共话生活点滴</div>
          <div class="details">中博夜步寻伴，共话生活点滴</div>
          <div class="avatar-username">
            <div class="avatar">
              <img
                  alt=""
                  src="https://img2.baidu.com/it/u=3143541191,3719748078&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1713200400&t=3364dafa30ca38b25694f59ca1371851">
            </div>
            <div class="username">
              村寨拾荒者
            </div>
          </div>

        </li>
        <li @click="navigateTo">
          <div class="phone"><img alt="" src="./hitchhiker/3.jpg"></div>
          <div class="title">副驾寻搭子，美食露营同游，共赴世间美好之旅！</div>
          <div class="details">
            副驾缺个伴可以一起玩，一起户外露营，一起去寻找美食的搭子，只要目标一致可以到处跑，世间美好，一起出发。
          </div>
          <div class="avatar-username">
            <div class="avatar">
              <img
                  alt=""
                  src="https://img2.baidu.com/it/u=3143541191,3719748078&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1713200400&t=3364dafa30ca38b25694f59ca1371851">
            </div>
            <div class="username">
              村寨拾荒者
            </div>
          </div>

        </li>
        <li @click="navigateTo">
          <div class="phone"><img alt="" src="./hitchhiker/4.jpg"></div>
          <div class="title">寻找美食搭子，共享舌尖上的盛宴！</div>
          <div class="details">
            我是一个热爱美食、喜欢探索各种口味的吃货。平时喜欢寻找城市里那些隐藏的美食小店，品尝各种地道的美食佳肴。现在，我想寻找同样热爱美食的你，一起开启我们的美食之旅！
          </div>
          <div class="avatar-username">
            <div class="avatar">
              <img
                  alt=""
                  src="https://img2.baidu.com/it/u=3143541191,3719748078&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1713200400&t=3364dafa30ca38b25694f59ca1371851">
            </div>
            <div class="username">
              村寨拾荒者
            </div>
          </div>

        </li>
        <li @click="navigateTo">
          <div class="phone"><img alt="" src="./hitchhiker/5.jpg"></div>
          <div class="title">诚邀运动伙伴，共享健身乐趣</div>
          <div class="details">
            大家好！我正在寻找一位热爱运动、有毅力的运动搭子，一起开启我们的健身之旅。我热爱运动，但总觉得一个人锻炼有些单调，希望找到一位同样热爱运动的你，一起分享运动的快乐，互相督促，共同进步。
          </div>
          <div class="avatar-username">
            <div class="avatar">
              <img
                  alt=""
                  src="https://img2.baidu.com/it/u=3143541191,3719748078&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1713200400&t=3364dafa30ca38b25694f59ca1371851">
            </div>
            <div class="username">
              村寨拾荒者
            </div>
          </div>
        </li>
        <li @click="navigateTo">
          <div class="phone"><img alt="" src="./hitchhiker/6.jpg"></div>
          <div class="title">求聊天搭子</div>
          <div class="details">求助!大家都是如何和奇葩辛友相处的?</div>
          <div class="avatar-username">
            <div class="avatar">
              <img
                  alt=""
                  src="https://img2.baidu.com/it/u=3143541191,3719748078&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1713200400&t=3364dafa30ca38b25694f59ca1371851">
            </div>
            <div class="username">
              村寨拾荒者
            </div>
          </div>

        </li>

      </ul>
    </nav>
  </div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

.content {
  width: 100%;
  height: 100%;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.content header {
  height: 40px;
  display: flex;
  align-items: center;
}

.content header .back {
  height: 20px;
  width: 20px;
  margin-right: 10px;
}

.content header .back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content nav {
  flex: 1;
  overflow: auto;
  width: 100%;
  background: rgba(240, 240, 240, 0.2);
}

.content nav ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
}

.content nav ul li {
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.content nav ul li .phone {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.content nav ul li .phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content nav ul li .title {
  font-size: 20px;
  font-weight: 600;
  margin: 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content nav ul li .details {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content nav ul li .avatar-username {
  display: flex;
  margin-top: 6px;
  align-items: center;
}

.content nav ul li .avatar-username .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.content nav ul li .avatar-username .avatar img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.content nav ul li .avatar-username .username {
  font-size: 12px;
  color: #666;
}

.content nav::-webkit-scrollbar {
  display: none;
}

</style>